// src/components/racing/Payment.jsx
import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useApp } from '../../contexts/AppContext';
import { useAuth } from '../../contexts/AuthContext';

const Payment = () => {
  const navigate = useNavigate();
  const { selectedTrack, selectedVehicle } = useApp();
  const { user } = useAuth();
  const [hours, setHours] = useState(1);
  const [paymentMethod, setPaymentMethod] = useState('wechat');

  useEffect(() => {
    if (!user) {
      navigate('/login');
      return;
    }

    if (!selectedTrack || !selectedVehicle) {
      navigate('/');
    }
  }, [user, selectedTrack, selectedVehicle, navigate]);

  const totalPrice = selectedVehicle ? selectedVehicle.price * hours : 0;

  const handlePayment = () => {
    // In a real app, we would integrate with actual payment gateways
    alert('支付成功！');
    navigate('/profile');
  };

  if (!selectedTrack || !selectedVehicle) {
    return null;
  }

  return (
    <div className="max-w-lg mx-auto space-y-8">
      <h1 className="text-2xl font-bold text-gray-900">确认订单</h1>

      <div className="bg-white rounded-lg shadow-md p-6 space-y-6">
        <div className="space-y-4">
          <div className="flex justify-between">
            <span className="text-gray-600">赛道</span>
            <span className="font-medium">{selectedTrack.name}</span>
          </div>
          <div className="flex justify-between">
            <span className="text-gray-600">车辆</span>
            <span className="font-medium">{selectedVehicle.name}</span>
          </div>
          <div className="flex justify-between items-center">
            <span className="text-gray-600">租用时长</span>
            <div className="flex items-center space-x-4">
              <button
                onClick={() => setHours(Math.max(1, hours - 1))}
                className="px-2 py-1 bg-gray-100 rounded"
              >
                -
              </button>
              <span>{hours}小时</span>
              <button
                onClick={() => setHours(hours + 1)}
                className="px-2 py-1 bg-gray-100 rounded"
              >
                +
              </button>
            </div>
          </div>
        </div>

        <div className="border-t pt-6">
          <div className="space-y-4">
            <div className="font-semibold">支付方式</div>
            <div className="space-y-2">
              {['wechat', 'alipay', 'unionpay'].map((method) => (
                <label
                  key={method}
                  className="flex items-center space-x-3 cursor-pointer"
                >
                  <input
                    type="radio"
                    name="paymentMethod"
                    value={method}
                    checked={paymentMethod === method}
                    onChange={(e) => setPaymentMethod(e.target.value)}
                    className="form-radio text-blue-600"
                  />
                  <span className="capitalize">{method}</span>
                </label>
              ))}
            </div>
          </div>
        </div>

        <div className="border-t pt-6">
          <div className="flex justify-between text-xl font-bold">
            <span>总计</span>
            <span className="text-blue-600">¥{totalPrice}</span>
          </div>
        </div>

        <button
          onClick={handlePayment}
          className="w-full bg-blue-600 text-white py-3 rounded-md hover:bg-blue-700"
        >
          确认支付
        </button>
      </div>
    </div>
  );
};

export default Payment;